<template>
    <div class="wrap_list">
        <div class="mid_recent ">
            <div class="top " style="padding: 0!important;">
                <ul class="table" v-for="item in spellCitys">
<!--                    <h4 id="A">A</h4>-->
                    <h4 v-bind:id="item.spell" >{{item.spell}}</h4>
<!--                    这里写个循环li-->
                    <li v-for="it in item.list"><a  class="public" href="/">{{it}}</a></li>
<!--                    <li><a class="public">成都</a></li>-->
<!--                    <li><a class="public">成都</a></li>-->

                    <li><a class="public" href="/Position/more">更多>></a></li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "CityList",
        // 进行模板间传值
        props:{
            spellCitys:Array
        },
        data(){
            return{

            }
        },
        methods:{
            //进行跳转 根据city,个人设计Api角度出发
            // view(city) {
            //     this.$router.push({path: `/view/${city}`})
            // }
        }
    }

</script>

<style scoped>
    .wrap_list{
        /*margin-top: -0.45rem;*/
    }
    .top{
        display: block;
        margin-top: 0;
        margin-bottom: .2rem;
        padding: .28rem .2rem;
        border: 1px solid #DDD8CE;
        border-radius: .06rem;
        overflow: hidden;
        background-color: #FDFDFC;
    }
    .table{
        min-height: .8rem;
        position: relative;
        overflow: hidden;
        z-index: 0;
        border-top: 1px solid #ddd8ce;
    }
    .table h4 {
        margin: 0;
        margin-bottom: -1px;
        height: 1.6rem;
        line-height: 1.6rem;
        color: #B7B7B7;
        font-size: .8rem;

    }
    .table:before {
        content: '';
        position: absolute;
        width: 25%;
        left: 25%;
        height: 100%;
        border-left: 1px solid #ddd8ce;
        border-right: 1px solid #ddd8ce;
    }

    .table:after {
        content: '';
        position: absolute;
        width: 10%;
        left: 75%;
        height: 100%;
        border-left: 1px solid #ddd8ce;
        border-right: none;
    }

    .table li , h4{
        display: inline-block;
        width: 25%;
        height: .8rem;
        line-height: .8rem;
        font-size: .28rem;
        text-align: center;
        border-bottom: 1px solid #ddd8ce;
        margin-bottom: -1px;
        float: left;
        position: relative;
        z-index: 10;
    }
    .public{
        display: block;
        color: inherit;
        height: 100%;
        overflow-x: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-decoration: none;
        outline: 0;
    }
</style>